<template>
  <view class="container flex-1 bg-back">
    <Nprogress :step="3" title="选择图片尺寸" />
    <view class="fixed -z-10 top-0 left-0">
      <up-count-down
        :time="estimatedTime * 1000"
        format="HH:mm:ss"
        @change="changTime"
        @finish="end"
      ></up-count-down>
    </view>
    <view class="px-[3%]">
      <view
        class="w-full px-[1%] overflow-hidden mb-[3%] flex"
        @click="chooseSize(0)"
        style="aspect-ratio: 343/188"
      >
        <view
          class="relative flex-1 rounded-[20rpx] overflow-hidden w-bor"
          :class="{ bor: !type }"
        >
          <image
            class="w-full h-full"
            :src="list[0].size_image"
            mode="aspectFill"
          ></image>
          <image
            v-if="!type"
            src="@/static/choose.png"
            class="w-6 h-6 absolute top-[2%] right-[2%] z-10"
          ></image>
          <view class="box">
            <view
              class="pb-[2%] text-white font-bold"
              :class="isBigSreen ? 'text-2main' : 'text-xl'"
            >
              画幅比例{{ list[0].scale }}
            </view>
            <view
              class="text-base font-[350] text-[#97979fc4] flex justify-between"
              :class="isBigSreen ? 'text-2base' : 'text-base'"
            >
              <view>方便发朋友圈、微博等社交媒体</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="px-3 pb-24">
      <view class="flex flex-wrap justify-center">
        <view
          class="w-[54%] overflow-hidden mb-3 flex"
          @click="chooseSize(1)"
          style="aspect-ratio: 188/343"
        >
          <view
            class="relative flex-1 rounded-[20rpx] overflow-hidden w-bor"
            :class="{ bor: type == 1 }"
          >
            <image
              class="w-full h-full"
              :src="list[1].size_image"
              mode="aspectFill"
            ></image>
            <image
              v-if="type == 1"
              src="@/static/choose.png"
              class="w-6 h-6 absolute top-[2%] right-[2%] z-10"
            ></image>
            <view class="box">
              <view
                class="pb-[2%] text-white font-bold"
                :class="isBigSreen ? 'text-2main' : 'text-xl'"
              >
                画幅比例{{ list[1].scale }}</view
              >
              <view
                class="font-[350] text-[#97979fc4] flex justify-between whitespace-nowrap"
                :class="isBigSreen ? 'text-2base' : 'text-base'"
              >
                <view>方便做手机屏保、短视频哦~</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view
      class="fixed bottom-0 footer flex items-center w-full z-10"
      v-if="!isBigSreen"
    >
      <view class="flex-1 flex justify-between items-center">
        <view class="flex items-center">
          <view class="text-main font-bold pl-2 pr-6" @click="goHome"
            >首页</view
          >
          <view class="text-main font-bold prev" @click="goBack">上一步</view>
        </view>
        <view class="change flex items-center justify-center" @click="toAi">
          生成AI画作</view
        >
      </view>
    </view>
    <up-overlay :show="showAi" zIndex="666">
      <view class="bg-back flex-1 w-full">
        <view class="flex justify-center mt-[25%] flex-col items-center">
          <view class="clock">
            <!-- <view class="hand hour-hand"></view>
            <view class="hand minute-hand"></view> -->
            <image
              src="@/static/time.png"
              class="w-full h-full"
              mode="widthFix"
            ></image>
          </view>
          <view
            class="text-main font-bold mt-7"
            :class="isBigSreen ? 'text-2main' : 'text-xl'"
            >AI作图中，等待时间约{{ nowTime }}s</view
          >
        </view>
        <view
          class="mx-[4%] bg-white mt-[10%] pb-[10%]"
          :class="isBigSreen ? 'rounded-[40rpx]' : 'rounded-[20rpx]'"
        >
          <view
            class="px-[5%] py-[4%] text-justify"
            style="line-height: 1.8"
            :class="isBigSreen ? 'text-2main' : 'text-xl'"
          >
            <div>
              {{ displayedText
              }}<span v-if="isOutputting" class="cursor pl-[1%] text-[#2567EC]"
                >|</span
              >
            </div>
          </view>
        </view>
      </view>
    </up-overlay>
    <view class="slide" v-if="isBigSreen">
      <view v-if="open" class="content">
        <view class="circle light mb-30" @click="toAi()">
          <view class="slc">生成 </view>
          <view class="slc">AI画作</view>
        </view>
        <view class="circle dark mb-30" @click="goBack">
          <view>上一步</view>
        </view>
        <view class="circle dark" @click="goHome"> 首页 </view>
      </view>
      <view class="jiantou">
        <view :class="open ? 'a mt-6' : 'b'" @click="handleSilde">
          <up-icon name="arrow-left-double" color="#8a8f96" size="36"></up-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, reactive, ref } from "vue";
import { getAllSize, createAiPic } from "@/api/index.js";
import { onLoad, onShow } from "@dcloudio/uni-app";
import Nprogress from "@/components/Nprogress.vue";

const isBigSreen = computed(() => {
  return uni.getSystemInfoSync().windowWidth > 500;
});

const showAi = ref(false);
const type = ref(0);
const scene = uni.getStorageSync("scene") || {};
const data = reactive({
  ai_image: "",
  size: "",
  share_url: "",
});

const chooseSize = (typs) => {
  type.value = typs;
  scene.size_id = list.value[typs].id;
  scene.size = list.value[typs].scale;
};
const list = ref([{ size_image: "" }, { size_image: "" }]);
const getList = () => {
  getAllSize().then((res) => {
    list.value = res;
    scene.size_id = list.value[0].id;
    scene.size = list.value[0].scale;
  });
};

const toAi = () => {
  if (type.value == -1) return uni.$u.toast("请选择图片尺寸");
  str.value = scene.scene_text;
  showAi.value = true;
  startOutput();
  createAiPic({ ...scene, is_mobile: isBigSreen.value ? 0 : 1 })
    .then((res) => {
      Object.assign(data, res);
      if (first.value) {
        performAfterCompletion();
      }
    })
    .catch((e) => {
      uni.showModal({
        title: "温馨提示",
        content: e,
        showCancel: false,
        success: () => {
          uni.navigateBack({
            delta: 2,
          });
        },
      });
    });
};
const goBack = () => {
  uni.navigateBack();
};
onLoad(() => {
  getList();
});

const str = ref("");
const displayedText = ref("");
const isOutputting = ref(false);
const elapsedTime = ref(null);
const charInterval = 150; // 每个字符的输出间隔时间（毫秒）

const estimatedTime = ref(0);

const startOutput = () => {
  if (isOutputting.value) return;
  estimatedTime.value = ~~((str.value.length * charInterval) / 1000) + 3;
  console.log(estimatedTime.value);
  isOutputting.value = true;
  displayedText.value = "";
  elapsedTime.value = null;

  let index = 0;
  const startTime = Date.now();

  const outputChar = () => {
    if (index < str.value.length) {
      displayedText.value += str.value[index];
      index++;
      setTimeout(outputChar, charInterval);
    } else {
      isOutputting.value = false;
      const endTime = Date.now();
      elapsedTime.value = ((endTime - startTime) / 1000).toFixed(2);
    }
  };

  outputChar();
};
const performAfterCompletion = () => {
  scene.ai_image = data.ai_image;
  scene.share_url = data.share_url;
  scene.share_id = data.share_id;
  uni.setStorageSync("scene", scene);
  if (data.ai_image) {
    showAi.value = false;
    uni.redirectTo({
      url: "/pages/index/share" + "?id=" + data.share_id,
    });
  }
};

const open = ref(true);
const handleSilde = () => {
  open.value = !open.value;
};

const nowTime = ref("");
const changTime = (e) => {
  nowTime.value = e.seconds;
};

const first = ref(0);
const end = () => {
  // return;
  first.value = 1;
  performAfterCompletion();
};

const goHome = () => {
  uni.removeStorageSync("scene");
  uni.reLaunch({
    url: "/pages/index/index",
  });
};
</script>

<style lang="scss" scoped>
.typing {
  font-family: monospace;
  white-space: pre;
}

.cursor {
  display: inline-block;
  width: 1ch;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

button {
  margin-top: 10px;
}
.clock {
  width: 15%;
  border-radius: 50%;
  position: relative;
  transform: rotateY(180deg);
}
.box {
  position: absolute;
  padding: 16rpx 14rpx;
  padding-right: 8rpx;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  // height: 170rpx;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0px 20px 10px 10px;
  border: 1px solid;
  border-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.20000000298023224),
      rgba(255, 255, 255, 0)
    )
    1 1;
  backdrop-filter: blur(4px);
}
.bor {
  border: 1px solid #2568ec !important;
}
.w-bor {
  border: 1px solid transparent;
}
.footer {
  width: 100%;
  padding: 0 40rpx;
  height: 156rpx;
  background: #ffffff;
  border-radius: 0px 0px 0px 0px;
  .prev {
    width: 160rpx;
    height: 84rpx;
    line-height: 84rpx;
    text-align: center;
  }
  .change {
    width: 240rpx;
    height: 84rpx;
    background: #2568ec;
    border-radius: 50rpx;
    font-weight: 700;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 32rpx;
    text-align: center;
    font-family: Source Han Serif CN, Source Han Serif CN;
  }
}

.slide {
  position: fixed;
  z-index: 555;

  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 48rpx 20rpx;
  bottom: 20%;
  width: 248rpx;
  background: linear-gradient(
    180deg,
    rgba(53, 58, 64, 0.9) 0%,
    rgba(22, 23, 27, 0.9) 100%
  );
  border-radius: 64rpx 0rpx 0rpx 120rpx;
  border: 1rpx solid;
  // border-image: linear-gradient(
  //     180deg,
  //     rgba(66.00000366568565, 71.00000336766243, 80.00000283122063, 1),
  //     rgba(32.00000189244747, 35.00000171363354, 38.0000015348196, 1)
  //   )
  //   4 4;
  .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 188rpx;
    height: 188rpx;
    font-size: 48rpx;
    font-weight: 600;
    text-align: center;
    color: #c3c8cd;
    .slc {
      line-height: 1.2;
    }
    &.light {
      font-weight: 600;
      color: #ffffff;
      text-shadow: 0px 0px 50px rgba(38, 171, 247, 0.2),
        0px 0px 20px rgba(99, 207, 255, 0.5);
      background: linear-gradient(321deg, #0077ce 0%, #4ec0ff 100%);
      border-radius: 200rpx 200rpx 200rpx 200rpx;
      filter: blur(0.3px);
    }
    &.dark {
      background: linear-gradient(318deg, #1d2328 0%, #131314 100%);
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      filter: blur(0.3px);

      box-shadow: inset 0rpx 0rpx 3rpx 0rpx rgba(63, 63, 63, 0.45);
    }
    &.mb-30 {
      margin-bottom: 30rpx;
    }
  }
  .jiantou {
    .a {
      transform: rotate(90deg);
    }
    .b {
      transform: rotate(-90deg);
    }
  }
}
</style>
